<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <meta name="description" content="Bootstrap Admin App + jQuery"/>
    <meta name="keywords" content="app, responsive, jquery, bootstrap, dashboard, admin"/>
    <title>宽界 | 让交易量化</title>
    <link rel="icon" href="/img/icon.ico" type="image/x-icon"/>
    <link rel="stylesheet" th:href="@{/vendor/fontawesome/css/font-awesome.min.css}"></link>
    　　
    <link rel="stylesheet" th:href="@{/vendor/simple-line-icons/css/simple-line-icons.css}"></link>
    　　
    <link rel="stylesheet" th:href="@{/media/css/bootstrap.css}" id="bscss"></link>
    　　
    <link rel="stylesheet" th:href="@{/media/css/app.css}" id="maincss"></link>
    　　
    <link rel="stylesheet" th:href="@{/media/css/theme-i.css}" id="maincss"></link>
</head>
<body>
<div class="wrapper">
    <div class="block-center mt-xl wd-xl">
        <div class="panel panel-dark panel-flat">
            <div class="panel-heading text-center">
                <a href="/index">
                    <img src="/img/logo.png" alt="Image" class="block-center img-rounded"/></a>
            </div>
            <div class="panel-body" id="registPage">
                <p class="text-center pv">快速注册新用户</p>
                <form id="form" data-parsley-validate="true" onsubmit="return false">
                    <div class="form-group has-feedback">
                        <label for="signupInputEmail1" class="text-muted">登录邮箱</label>
                        <input id="signupInputEmail1" type="email" placeholder="输入邮箱地址" class="form-control"
                               v-model="email" data-parsley-required-message="请输入邮箱地址"
                               data-parsley-type-message="请输入正确的邮箱地址" required="required"/>
                        <span class="fa fa-envelope form-control-feedback text-muted"></span>
                    </div>
                    <div class="form-group has-feedback">
                        <label for="signupInputName" class="text-muted">登录名称</label>
                        <input id="signupInputName" type="text" placeholder="我们该如何称呼您？" class="form-control"
                               v-model="userName" data-parsley-required-message="请输入登录名称" required="required"/>
                        <span class="fa fa-user form-control-feedback text-muted"></span>
                    </div>
                    <div class="form-group has-feedback">
                        <label for="signupInputPassword" class="text-muted">密码</label>
                        <input id="signupInputPassword" type="password" placeholder="密码" class="form-control"
                               v-model="password" required="required" data-parsley-required-message="请输入密码"
                               pattern="/^(?![0-9]+$)(?![a-zA-Z]+$)(?![^0-9a-zA-Z]+$)\S{6,20}$/"
                               data-parsley-pattern-message="请输入6-20位字母数字组合"/>
                        <span class="fa fa-lock form-control-feedback text-muted"></span>
                    </div>
                    <button v-on:click="register" class="btn btn-block btn-primary mt-lg">创建账户</button>
                </form>
                <p></p>
                <div id="errorMsg" class="alert alert-danger text-center" style="display:none;"></div>
                <p class="pt-lg text-center">已经有账户？</p>
                <a href="/login" class="btn btn-block btn-default">登录</a>
            </div>
        </div>
        <div class="p-lg text-center">
            <span>&copy;</span>
            <span>2016</span>
            <span>-</span>
            <span>2018</span>
            <br/>
            <span>shawnpeng@yeah.net</span>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="/webjarslocator/jquery/jquery.min.js"></script>

<script th:src="@{/webjars/vue/2.6.11/vue.min.js}"></script>
<script th:src="@{/webjars/vue-resource/0.7.0/dist/vue-resource.min.js}"></script>
<script th:src="@{/vendor/parsleyjs/dist/parsley.min.js}"></script>
<script type='text/javascript'>
    Vue.http.options.emulateJSON = true;
    var registPage = new Vue({
        el: '#registPage',
        data: {
            'email': '',
            'password': '',
            'userName': ''
        },
        methods: {
            register: function (event) {
                var ok = $('#form').parsley().isValid({force: true});
                if (!ok) {
                    return;
                }
                var datas = {
                    email: this.email,
                    passWord: this.password,
                    userName: this.userName
                };
                this.$http.post('/user/register', datas).then(function (response) {
                    if (response.data.rspCode == '000000') {
                        window.open('/', '_self');
                    } else {
                        $("#errorMsg").html(response.data.rspMsg);
                        $("#errorMsg").show();
                    }
                }, function (response) {
                    console.log('error');
                })
            }
        }
    })
</script>
</html>